import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useAppStore = defineStore('app', () => {
  // 主题相关
  const isDarkMode = ref<boolean>(
    window.matchMedia('(prefers-color-scheme: dark)').matches
  )

  // 侧边栏状态
  const sidebarCollapsed = ref<boolean>(false)

  // 全局加载状态
  const globalLoading = ref<boolean>(false)

  // 面包屑导航
  const breadcrumbs = ref<Array<{ title: string; path?: string }>>([])

  // 切换主题
  const toggleTheme = () => {
    isDarkMode.value = !isDarkMode.value
  }

  // 切换侧边栏
  const toggleSidebar = () => {
    sidebarCollapsed.value = !sidebarCollapsed.value
  }

  // 设置全局加载状态
  const setGlobalLoading = (loading: boolean) => {
    globalLoading.value = loading
  }

  // 设置面包屑
  const setBreadcrumbs = (crumbs: Array<{ title: string; path?: string }>) => {
    breadcrumbs.value = crumbs
  }

  return {
    // 状态
    isDarkMode,
    sidebarCollapsed,
    globalLoading,
    breadcrumbs,

    // 方法
    toggleTheme,
    toggleSidebar,
    setGlobalLoading,
    setBreadcrumbs
  }
}, {
  persist: {
    key: 'app-store',
    storage: localStorage,
    // @ts-expect-error - pinia-plugin-persistedstate 类型定义问题
    paths: ['isDarkMode', 'sidebarCollapsed'], // 只持久化主题和侧边栏状态
  }
})
